<template>
  <div class="users">
    <h1>Users</h1>
    <!-- 添加用户信息 -->
    <form action="" v-on:submit="addUser">
      <input type="text" v-model="newUser.name" placeholder="添加新用户">
      <input type="text" v-model="newUser.email" placeholder="添加新用户邮箱">
      <input type="submit" value="添加">
    </form>

    <!-- 展示用户信息 -->
    <ul>
      <li v-for="user in users">{{user.name}} : {{user.email}} <button v-on:click="delUser(user)">x</button></li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Users",
    data() {
      return {
        newUser:{},
        users:[
          {name:"zhangjiangpeng",email:"zhangjiangpeng@email.com"},
          {name:"haofei",email:"haofei@email.com"},
          {name:"lvkai",email:"lvkai@email.com"},
          {name:"yangyi",email:"yangyi@email.com"}
        ]
      }
    },
    methods:{
      addUser:function(){
        this.users.push({
          name:this.newUser.name,
          email:this.newUser.email
        });
      },
      delUser:function(user){
        this.users.splice(this.users.indexOf(user),1);
      }
    },
    computed:{

    }
  }
</script>

<style scoped>

</style>
